<template>
  <div class="stats page">
    <Title :show-sub-title="false" />
    <div class="tips bg-full animate__animated animate__fadeInUp"></div>
    <div class="abort animate__animated animate__fadeInUp">截止{{ date }}</div>
    <div class="table animate__animated animate__zoomIn">
      <div class="scroll">
        <table>
          <thead>
            <tr>
              <th>序号</th>
              <th>分公司</th>
              <th>须100%参赛人数</th>
              <th>须参赛人员参赛率</th>
              <th>实际参赛总人数</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in list" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ item.company }}</td>
              <td>{{ item.totalCount }}</td>
              <td>
                <div class="bar-wrap">
                  <div class="bar">
                    <div class="inner">
                      <div class="value" :style="{ width: item.ratio }"></div>
                    </div>
                    <div class="label">{{ item.ratio }}</div>
                  </div>
                  <div class="num">{{ item.appliedCount }}人</div>
                </div>
              </td>
              <td>{{ item.realCount }}人</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import Title from '@/components/Title.vue'
import { ref } from 'vue'
import { getStats } from '@/api/index.js'

const list = ref([])

getStats().then((res) => {
  list.value = res.data.map((item) => {
    item.ratio = (item.ratio * 100).toFixed(2) + '%'
    return item
  })
})

const now = new Date()
const date = `${now.getMonth() + 1}月${now.getDate()}日`
</script>

<style lang="less" scoped>
.tips {
  width: 843px;
  height: 89px;
  background-image: url(../assets/img/stats/tips.png);
  margin: 100px 0 0;
  flex-shrink: 0;
}

.abort {
  color: #1361a2;
  font-size: 48px;
  margin: 40px 0 80px;
}

.table {
  width: 100%;
  box-sizing: border-box;
  padding: 0 60px;

  .scroll {
    height: 700px;
    overflow: auto;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }
  th,
  td {
    border: 1px solid #4f97bd;
    padding: 0;
    text-align: center;
  }
  th {
    background: #6aadf3;
    font-size: 36px;
    height: 60px;
  }
  td {
    font-size: 36px;
    height: 60px;
  }
  .bar-wrap {
    padding: 0 10px;
    display: flex;
    align-items: center;
    .num {
      color: #fff;
      font-size: 36px;
      text-shadow:
        -1px -1px 0 #fe7e0d,
        1px -1px 0 #fe7e0d,
        -1px 1px 0 #fe7e0d,
        1px 1px 0 #fe7e0d;
    }
  }
  .bar {
    margin-right: 10px;
    flex: 1;
    display: flex;
    border: 1px solid #fda43f;
    border-radius: 30px;
    height: 30px;
    overflow: hidden;
    background: #fff;
    .inner {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 10px;
    }
    .label {
      background: #fda43f;
      font-size: 30px;
      color: #fff;
      padding: 0 10px;
    }
    .value {
      width: 50%;
      height: 20px;
      border-radius: 20px;
      background: #fda43f;
    }
  }
}
</style>
